﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
            //创建一个多变形
            var Polygon = new ol.Feature({
                geometry: new ol.geom.Polygon([[[0.0, 0.0], [1.0, 1.0], [1.0, 0.0]]])
            });
            //设置区样式信息
            Polygon.setStyle(new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.5)'
                }),
                //边线颜色
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                //形状
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            }));

            //实例化一个矢量图层Vector作为绘制层
            var source = new ol.source.Vector({
                features: [Polygon]
            });
            //创建一个图层
            var vector = new ol.layer.Vector({
                source: source
            });
            //将绘制层添加到地图容器中
            map.addLayer(vector);
        }
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>
